<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      title="导出列选择"
      :width="width"
      @ok="handleConfirm"
    >
      <Row class="all-checkbox">
        <Col :span="span" style="margin-left: auto">
          <Checkbox
            v-model:checked="allChecked"
            :indeterminate="indeterminate"
            @change="onCheckAllChange"
            >全选</Checkbox
          >
        </Col>
      </Row>
      <CheckboxGroup v-model:value="currentValue" class="checkbox-group">
        <Row>
          <Col :span="span" v-for="(item, index) in columns" :key="index" class="checkbox-item">
            <Checkbox :value="item">{{ item }}</Checkbox>
          </Col>
        </Row>
      </CheckboxGroup>
    </BasicModal>
    <slot>
      <Button @click="handleOpenModal">导出</Button>
    </slot>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, onBeforeMount } from 'vue';
  import { useModal, BasicModal } from '/@/components/Modal';
  import { Button, Row, Col, CheckboxGroup, Checkbox } from 'ant-design-vue';
  import propsParams from './props';
  import { isFunction } from '/@/utils/is';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { downloadByData } from '/@/utils/file/download';

  const { createMessage } = useMessage();

  const props = defineProps(propsParams);

  const emits = defineEmits(['confirm']);

  const columns = ref<string[]>([]);

  // 当前选中项
  const currentValue = ref<string[]>([]);

  // 全选状态
  const allChecked = ref(false);

  const indeterminate = ref(false);

  const [register, { openModal, closeModal }] = useModal();

  const onCheckAllChange = (e) => {
    currentValue.value = e.target.checked ? columns.value : [];
    allChecked.value = e.target.checked;
    indeterminate.value = false;
  };

  watch(
    () => currentValue.value,
    (val) => {
      indeterminate.value = !!val.length && val.length < columns.value.length;
      allChecked.value = val.length === columns.value.length;
    },
  );

  // 获取导出列
  const getColumnTitles = async () => {
    if (!isFunction(props.colunmApi)) {
      createMessage.warning('获取导出表头数据的接口应该是一个函数！');
      return;
    }

    const ret = await props.colunmApi(props.columnParams);
    if (!props.getColumnTitleFiled) {
      columns.value = ret;
    } else {
      columns.value = ret[props.getColumnTitleFiled];
    }
    // console.log('%c表头数据', 'color:#f00;font-size:30px;font-weight:bold', ret);
  };

  // 打开导出弹窗
  const handleOpenModal = () => {
    props.beforeOpenModelCallback();
    openModal(true);
  };
  // 关闭导出弹窗
  const handleCloseModal = () => {
    restData();
    closeModal();
  };

  // 确定
  const handleConfirm = () => {
    if (props.auto) {
      exportFile();
      handleCloseModal();
    }
    emits('confirm', currentValue.value);
  };

  // 导出
  const exportFile = async () => {
    const API = props.api;
    if (!isFunction(API)) {
      createMessage.warning('下载接口应该是一个函数！');
      return;
    }
    const ret = await API({
      [props.columnTitleField]: currentValue.value,
      ...props.params,
    });

    let name = ret.fileName;
    if (props.fileName) {
      name = props.fileName;
    }
    downloadByData(ret.data, name);
  };

  // 初始化选中数据
  const restData = () => {
    currentValue.value = [];
    allChecked.value = false;
    indeterminate.value = false;
  };

  onBeforeMount(() => {
    getColumnTitles();
  });

  defineExpose({ handleOpenModal, handleCloseModal });
</script>

<style lang="less" scoped>
  .all-checkbox {
    padding: 0 16px 16px;
    border-bottom: 1px #f5f5f5 solid;
  }

  .checkbox-group {
    padding: 0 16px 16px;
    width: 100%;

    .checkbox-item {
      margin-top: 20px;
    }
  }
</style>
